<template>
  <div>
    <el-drawer
        :title="title"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
      <el-descriptions :column="2" border size="small" direction="horizontal">
        <el-descriptions-item label="店铺名称">{{
            detailData.storeName
          }}
        </el-descriptions-item>
        <el-descriptions-item label="一级分类">{{
            detailData.financeName
          }}
        </el-descriptions-item>
        <el-descriptions-item label="二级分类">{{
            detailData.levelName
          }}
        </el-descriptions-item>
        <el-descriptions-item label="仓库">{{
            detailData.areaName
          }}
        </el-descriptions-item>
        <el-descriptions-item label="品牌">{{
            detailData.systemName
          }}
        </el-descriptions-item>
        <el-descriptions-item label="责任主体">{{
            detailData.optionerName
          }}
        </el-descriptions-item>
        <el-descriptions-item label="报销原因类型">
          {{ detailData.reimburseTypeName || '' }}
        </el-descriptions-item
        >
        <el-descriptions-item label="报销原因说明">
          <el-tooltip
              class="item"
              effect="dark"
              :content="detailData.reimburseRemark"
              placement="bottom"
          >
            <div class="reimburseRemarksty">
              {{ detailData.reimburseRemark || '' }}
            </div>
          </el-tooltip>
        </el-descriptions-item>
        <el-descriptions-item label="报销金额"
        ><span style="color: red">{{ detailData.money || 0 }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="创建人"
        ><span>{{
            detailData.creator || ''
          }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="接收回款方式">
          {{
            detailData.paymentMethod
                ? paymentMethodData[detailData.paymentMethod - 1]?.name
                : ''
          }}
        </el-descriptions-item>
        <el-descriptions-item label="报销状态">
          {{
            detailData.status !== null
                ? baoXiaoStatus[detailData.status]?.name
                : ''
          }}
        </el-descriptions-item>
        <el-descriptions-item
            label="收款码"
            v-if="detailData.paymentMethod != 1&&detailData.payUrl"
        >
          <el-image
              style="width: 50px; height: 50px"
              :src="'https://' + detailData.payUrl"
              :preview-src-list="['https://' + detailData.payUrl]"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item
            label="卡号信息"
            v-if="detailData.paymentMethod == 1"
        >
          <p>卡号: {{ detailData.cardNo || '' }}</p>
          <p>户名: {{ detailData.cardName || '' }}</p>
          <p>开户行: {{ detailData.bankName || '' }}</p>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ detailData.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="驳回原因">{{
            detailData.rejectReason || ''
          }}
        </el-descriptions-item>
        <el-descriptions-item label="凭证" :span="2">
          <div class="pzclass" style="display: flex">
            <div v-for="(item, index) in detailData.proof" :key="index">
              <el-image
                  style="
                  width: 50px;
                  height: 50px;
                  margin-right: 2px;
                  border: 1px solid #cdc9c9;
                "
                  :src="'https://' + item"
                  :key="index"
                  :preview-src-list="detailData.proof.map((a) => 'https://' + a)"
              ></el-image>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="审核信息" :span="2">
          <div class="pzclass" style="display: flex">
            {{ `${detailData.operator || ""}-${detailData.updateTime || ""}` }}
          </div>
        </el-descriptions-item>

        <el-descriptions-item label="报销文件" :span="2">
          <a :href="`https://${detailData.reimburseExcelUrl}`">{{
              detailData.reimburseExcelUrl
            }}</a>
        </el-descriptions-item>
        <el-descriptions-item
            v-if="detailData.status === 4"
            label="财务打款凭证"

            :span="2"
        >
          <template v-if="detailData.paidUrl && detailData.paidUrl.length"></template>
          <el-image
              v-for="(item,index) in detailData.paidUrl"
              :key="index"
              style="width: 50px; height: 50px"
              :src="'https://' + item"
              :preview-src-list="detailData.paidUrl.map((a) => 'https://' + a)"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item
            v-if="detailData.status === 4"
            label="财务打款方式"
            :span="2"
        >
          {{ detailData.paymentMethodName }}
        </el-descriptions-item>
      </el-descriptions>


    </el-drawer>


  </div>
</template>

<script>
export default {
  name: "repeatDetail",
  data() {
    return {
      drawer: false,
      direction: "rtl",
      title: "",
      detailData: {},
      paymentMethodData: [
        {value: 1, name: '银行卡'},
        {value: 2, name: '微信'},
        {value: 3, name: '支付宝'},
      ],
      baoXiaoStatus: [
        {value: 0, name: '财务待审核'},
        {value: 1, name: '财务待打款'},
        {value: 2, name: '已取消'},
        {value: 3, name: '审核不通过'},
        {value: 4, name: '已打款'},
      ],
    }
  },
  methods: {
    handleOpen(a) {
      this.drawer = true
      this.detailData = a
    },
    handleClose() {
      this.drawer = false
    }
  }
}
</script>

<style scoped>

</style>